<template>
  <page-view class="user-page">
    <page-header title="设置" :showBack="true"></page-header>
    <div class="user_content" v-if="$store.state.isLogin">
      <ul>
        <li>
          <div class="item_left">头像</div>
          <div class="item_right">
            <img
              :src="BaseURL + $store.state.userInfo.user_photo"
              alt=""
              style="
                width: 30px;
                height: 30px;
                border-radius: 50%;
                vertical-align: middle;
              "
            />
            <icon name="arrow" style="margin-left: 10px" />
          </div>
        </li>
        <!-- 用户 -->
        <li>
          <div class="item_left">用户名</div>
          <div class="item_right" @click="editUseName">
            {{ $store.state.userInfo.nickName }}
            <icon name="arrow" style="margin-left: 10px" />
          </div>
        </li>
        <popup v-model:show="editUserNameShow" class="editDialog">
          <p>修改用户名</p>
          <Form @submit="onSubmit">
            <cell-group inset>
              <field
                v-model="$store.state.userInfo.nickName"
                name="用户名"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
              />
            </cell-group>
            <div style="margin: 16px">
              <Button round block type="primary" native-type="submit">
                修改
              </Button>
            </div>
          </Form>
        </popup>

        <!-- 手机号 -->
        <li>
          <div class="item_left">手机号</div>
          <div class="item_right" @click="editUsePhone">
            {{ $store.state.userInfo.user_phone }}
            <icon name="arrow" style="margin-left: 10px" />
          </div>
        </li>
        <popup v-model:show="editUserPhoneShow" class="editDialog">
          <p>修改手机号</p>
          <Form @submit="onSubmit2">
            <cell-group inset>
              <field
                v-model="$store.state.userInfo.user_phone"
                name="手机号"
                label="手机号"
                placeholder="手机号"
                :rules="[{ required: true, message: '请填写手机号' }]"
              />
            </cell-group>
            <div style="margin: 16px">
              <Button round block type="primary" native-type="submit">
                修改
              </Button>
            </div>
          </Form>
        </popup>

        <li class="loginOut" @click="loginOut">退出登录</li>
      </ul>
    </div>
  </page-view>
</template>

<script>
import {
  Icon,
  Dialog,
  Toast,
  Popup,
  Form,
  Field,
  CellGroup,
  Button,
} from "vant";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import Api from "../utils/api";
export default {
  name: "Setting",
  components: {
    Icon,
    Dialog,
    Toast,
    useRoute,
    useRouter,
    Popup,
    Form,
    Field,
    CellGroup,
    Button,
  },
  setup() {
    const store = useStore();
    const route = useRoute();
    const router = useRouter();
    const loginOut = () => {
      Dialog.confirm({
        title: "是否退出当前账户登录",
      })
        .then(() => {
          store.commit("loginOut");
          console.log("退出登录了");
          Toast.success("你已退出登录状态");
          router.replace({ name: "user" });
        })
        .catch(() => {
          // on cancel
        });
    };
    const editUserNameShow = ref(false);
    const editUseName = () => {
      editUserNameShow.value = true;
    };
    const editUserPhoneShow = ref(false);
    const editUsePhone = () => {
      editUserPhoneShow.value = true;
    };

    const onSubmit = async (values) => {
      console.log(store.state.userInfo);
      console.log("submit", values);
      //id,nickName,user_sex,user_phone,user_email,user_photo,
      let userInfo = {
        id: store.state.userInfo.id,
        nickName: store.state.userInfo.nickName,
        user_sex: store.state.userInfo.user_sex,
        user_phone: store.state.userInfo.user_phone,
        user_email: store.state.userInfo.user_email,
        user_photo: store.state.userInfo.user_photo,
      };
      // console.log(userInfo)
      let results = await Api.userInfo.update(userInfo);
      console.log(results);
      editUserNameShow.value = false;
      Toast.success("修改用户名成功");
    };
    const onSubmit2 = async () => {
      let userInfo = {
        id: store.state.userInfo.id,
        nickName: store.state.userInfo.nickName,
        user_sex: store.state.userInfo.user_sex,
        user_phone: store.state.userInfo.user_phone,
        user_email: store.state.userInfo.user_email,
        user_photo: store.state.userInfo.user_photo,
      };
      // console.log(userInfo)
      // let results = await Api.userInfo.update(userInfo);
      // console.log(results);
      editUserNameShow.value = false;
      Toast.success("修改手机号成功");
    };

    return {
      loginOut,
      editUseName,
      editUsePhone,
      editUserNameShow,
      editUserPhoneShow,
      onSubmit,
      onSubmit2,
    };
  },
};
</script>

<style lang="scss" scoped>
.user_content {
  height: 667px;
  // margin-top: 20px;
  // padding: 5px 10px;
  padding-top: 15px;
  background-color: rgb(239, 239, 239);
  // border: 1px solid black;
  ul > li {
    height: 50px;
    padding: 0 20px;
    background-color: rgb(254, 255, 255);
    border-bottom: 1px solid gainsboro;

    display: flex;
    .item_left {
      width: 50%;
      line-height: 50px;
      //   border: 1px solid black;
    }
    .item_right {
      text-align: right;
      width: 50%;
      line-height: 50px;
      //   border: 1px solid black;
    }
  }
}


::v-deep .editDialog {
  text-align: center;
  width: 300px;
  height: 150px;
}
</style>